<template>
  <el-dialog
  :title="btn==0?'添加':'操作'"
  :visible.sync="dialogVisible"
  width="5 0%"
  :before-close="handleClose">
  
<!-- 表单 -->
  <el-form :model="ruleForm"
   :rules="rules"
    ref="ruleForm" 
    label-width="100px" 
    class="demo-ruleForm">
     <el-form-item label="卡号" prop="card">
    <el-input v-model="ruleForm.card"></el-input>
  </el-form-item>
        <!-- <el-select v-model="form.region" placeholder="请选择会员名字">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select> -->
 <el-form-item label="会员名字" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>

  <el-form-item label="手机号码" prop="number">
    <el-input v-model="ruleForm.number"></el-input>
  </el-form-item>

<!-- //开卡时间 -->
   <el-form-item label="开卡时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2"></el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>

  <!-- //到期时间 -->
  <el-form-item label="到期时间" required>
    <el-col :span="11">
      <el-form-item prop="date3">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date3" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2"></el-col>
    <el-col :span="11">
      <el-form-item prop="date4">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date4" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
    <!-- <el-input v-model="ruleForm.card"></el-input> -->
 
  </el-form>
  

  <span slot="footer" class="dialog-footer">
    <el-button @click="closefun">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
  </span>
</el-dialog>

</template>

<script>
import {addfunApi,editfunApi} from '../../../api/MemberApi'
export default {

    props:['row','btn'],
  data() {
      return {
        dialogVisible: true,
        ruleForm:{
            id:'',  
            card: '',
            viptype: '普通会员',
            rank:'VIP1',
           name: '',
           number:'',
          consumption:'1200.90',
          balance:'1200.90',
          accrual:'1200.90',
          integral:'1000',
          opening:'',
          expiration:'',
         
        },
        rules: {
            card:[
             { required: true, message: '请输入卡号', trigger: 'blur' },
            
          ],
          name: [
             { required: true, message: '请输入会员名字', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            // {validator:validateMyname,trigger:'blur'}
          ],
           number:[
             { required: true, message: '请输入手机号', trigger: 'blur' },
            
          ],
          opening:[
             { required: true, message: '请输入开卡时间', trigger: 'blur' },
            
          ],
          expiration:[
             { required: true, message: '请输入到期时间', trigger: 'blur' },
            
          ],
           date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
           date3: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date4: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
        }
      };
    },
    mounted() {
    //    this.ruleForm=JSON.parent(JSON.stringify(this.row))
       this.ruleForm = {...this.row}
    },
    methods: {

     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {



             
              // alert('submit!');
            if(this.btn==0){
               // console.log(this.ruleForm);
              addfunApi(this.ruleForm).then(res=>{
                  console.log('res',res);
                    if(res.code==200){
                        this.$emit('resettable')//刷新
                        this.$emit('operatetionclose')//关闭
                    }
                })
            }else{
                editfunApi(this.ruleForm).then(res=>{
                    console.log('res',res);
                    if(res.code==200){
                        this.$emit('resettable')//刷新
                        this.$emit('operatetionclose')//关闭
                    }
                })
                 
            }
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
          },
        closefun(){
          this.$emit('operatetionclose')
        },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.closefun
          })
          .catch(_ => {});
      }
    }
}
</script>

<style>

</style>